<template>
  <div class="rating_page">
    <section>
      <Top><p>订单备注</p></Top>
      <section class="quick_remark">
        <header  class="header_style">快速备注</header>
        <ul class="remark_arr_list_ul">
          <li class="remark_arr_list_li" v-for="(item,index) in remarksArr" :key="index" >
                        <span class="remark_item_li first" v-for="(item1,index1) in remarksArr[index]" :key="index1" :class="[{choosed:currstr =='不要辣'&&str==index&&img==index1},{choosed:currstr == '少点辣'&&str==index&&img==index1},{choosed:currstr == '多点辣'&&str==index&&img==index1},{choosed:currstr1 == '不要香菜'&&str1==index&&img1==index1},{choosed:currstr2 == '不要洋葱'&&str2==index&&img2==index1},{choosed:currstr3 == '多点醋'&&str3==index&&img3==index1},{choosed:currstr4 == '多点葱'&&str4==index&&img4==index1},{choosed:currstr6 == '去冰' &&str6==index&&img6==index1},{choosed:currstr6 == '少冰'&&str7==index&&img7==index1},]"  @click="chooseItem(item1,index,index1)">{{item1}}
                        </span>
          </li>
        </ul>
      </section>
      <section  class="input_remark quick_remark">
        <header  class="header_style">其他备注</header>
        <textarea placeholder="请输入备注内容(可不填)" class="input_text" v-model="textArea"></textarea>
      </section>
      <div class="determine" @click="determine()">确定</div>
    </section>
  </div>
</template>

<script>
import Top from "@/components/Top";
export default {
  name: "DDremarks",
  components: {Top},
  data:function(){
    return{
      remarksArr:[],//备注数组
      currstr:"",
      currstr1:"",
      currstr2:"",
      currstr3:"",
      currstr4:"",
      currstr5:"",
      currstr6:"",
      currstr7:"",
      str:0,
      str1:0,
      str2:0,
      str3:0,
      str4:0,
      str5:0,
      str6:0,
      str7:0,
      img:0,
      img1:0,
      img2:0,
      img3:0,
      img4:0,
      img5:0,
      img6:0,
      img7:0,
      remarkDetailarr:[],//备注数组
      textArea:"",
      remarkStr:"",
    }
  },
  methods:{
    chooseItem(a,b,c){
      // console.log(a,b,c);
      if(a=="不要辣"||a=='少点辣'||a=="多点辣"){
        this.currstr = a;
        this.str= b;
        this.img= c;
      }else if(a=="不要香菜"){

        this.currstr1 = a;
        this.str1= b;
        this.img1= c;
      }else if(a=="不要洋葱"){

        this.currstr2 = a;
        this.str2= b;
        this.img2= c;
      }else if(a=="多点醋"){

        this.currstr3 = a;
        this.str3= b;
        this.img3= c;
      }else if(a=="多点葱"){

        this.currstr4 = a;
        this.str4= b;
        this.img4= c;
      }else if(a=="去冰"){

        this.currstr6 = a;
        this.str6= b;
        this.img6= c;
      }else if(a=="少冰"){
        this.currstr6 = a;
        this.str7= b;
        this.img7= c;
      }
      this.remarkDetailarr = [this.currstr,this.currstr1,this.currstr2,this.currstr3,this.currstr4,this.currstr6];
    },
    determine(){
      //    点击确定按钮把确定备注传递过去
      this.remarkDetailarr =  this.remarkDetailarr.filter(item=>item);
      this.remarkDetailarr.push(this.textArea);
      // console.log(this.remarkDetailarr);
      localStorage.setItem("remarkOrder",JSON.stringify(this.remarkDetailarr));
      this.$router.push("/close");
      this.$parent.$emit("remark_event",this.remarkDetailarr);
    }

  },
  created() {
    //    获取备注信息
    this.axios.get("https://elm.cangdu.org/v1/carts/1/remarks").then(data=>{
      // console.log(data);
      this.remarksArr = data.data.remarks;
    }).catch(error=>{
      console.log(error);
    })
  }
}
</script>

<style scoped>
.rating_page {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  z-index: 204;
  //padding-top: 1.95rem;
}
#head_top {
  background-color: #3190e8;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 4rem;
}
#head_top .head_goback {
  left: .4rem;
  width: .6rem;
  height: 1rem;
  line-height: 2.2rem;
  margin-left: .4rem;
}
.head_goback {
  line-height: 2.2rem;
}
.title_head{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  color: #fff;
  text-align: center;
}
.title_head .title_text {
  font-size: .8rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
.quick_remark {
  background-color: #fff;
  //margin-top: 2rem;
  padding: 0 1.5rem 1rem;
}
.header_style {
  font-size: 1.1rem;
  color: #333;
  line-height: 3rem;
}
.quick_remark ul {
  display: flex;
  flex-wrap: wrap;
}
.quick_remark ul li{
  margin-right: .6rem;
  margin-bottom: 1.3rem;
}
.quick_remark ul li .first {
  border-left: .025rem solid #3190e8;
  border-top-left-radius: .2rem;
  border-bottom-left-radius: .2rem;
}
.quick_remark ul li span{
  font-size: 1rem;
  color: #333;
  padding: .4rem .6rem;
  border: .025rem solid #3190e8;

}
.quick_remark ul li:first-of-type span:last-of-type {
  border-top-right-radius: .2rem;
  border-bottom-right-radius: .2rem;
}
.input_remark {
  background-color: #fff;
}
.input_remark .input_text {
  width: 100%;
  background-color: #f9f9f9;
  border: .025rem solid #eee;
  resize: none;
  min-height:6rem;
  border-radius: .2rem;
  font-size:1rem;
  color: #666;
  padding: 1rem;
}
.determine{
  background-color: #4cd964;
  font-size: 1rem;
  color: #fff;
  text-align: center;
  margin: 0 .7rem;
  line-height: 2.5rem;
  border-radius: .2rem;
}
.choosed {
  color: #fff;
  background-color: #3190e8;
}
</style>